<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card success">
        <div class="stat-icon">
          <el-icon><ShoppingCart /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.purchaseOrders }}</div>
          <div class="stat-label">采购订单</div>
        </div>
      </div>
      
      <div class="stat-card info">
        <div class="stat-icon">
          <el-icon><House /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.inventoryItems }}</div>
          <div class="stat-label">库存商品</div>
        </div>
      </div>
      
      <div class="stat-card warning">
        <div class="stat-icon">
          <el-icon><Sell /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.salesOrders }}</div>
          <div class="stat-label">销售订单</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><Money /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">¥{{ stats.totalRevenue }}</div>
          <div class="stat-label">总收入</div>
        </div>
      </div>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-grid">
      <div class="chart-card">
        <div class="chart-header">
          <h3>销售趋势</h3>
        </div>
        <div class="chart-content">
          <v-chart :option="salesChartOption" style="height: 300px;" />
        </div>
      </div>
      
      <div class="chart-card">
        <div class="chart-header">
          <h3>库存分布</h3>
        </div>
        <div class="chart-content">
          <v-chart :option="inventoryChartOption" style="height: 300px;" />
        </div>
      </div>
    </div>
    
    <!-- 最近活动 -->
    <div class="recent-activities">
      <div class="card">
        <div class="card-header">
          <h3>最近活动</h3>
        </div>
        <div class="activity-list">
          <div
            v-for="activity in recentActivities"
            :key="activity.id"
            class="activity-item"
          >
            <div class="activity-icon" :class="activity.type">
              <el-icon><component :is="activity.icon" /></el-icon>
            </div>
            <div class="activity-content">
              <div class="activity-title">{{ activity.title }}</div>
              <div class="activity-time">{{ activity.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 统计数据
const stats = ref({
  purchaseOrders: 156,
  inventoryItems: 234,
  salesOrders: 89,
  totalRevenue: '1,234,567'
})

// 销售趋势图表配置
const salesChartOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['销售额', '订单数']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销售额',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230],
      smooth: true,
      lineStyle: {
        color: '#409eff'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
          ]
        }
      }
    },
    {
      name: '订单数',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330],
      smooth: true,
      lineStyle: {
        color: '#67c23a'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
            { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
          ]
        }
      }
    }
  ]
})

// 库存分布图表配置
const inventoryChartOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '库存分布',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '原材料' },
        { value: 735, name: '半成品' },
        { value: 580, name: '成品' },
        { value: 484, name: '包装物' },
        { value: 300, name: '其他' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    type: 'purchase',
    icon: 'ShoppingCart',
    title: '新增采购订单 PO-2024-008',
    time: '2分钟前'
  },
  {
    id: 2,
    type: 'sales',
    icon: 'Sell',
    title: '完成销售订单 SO-2024-006',
    time: '5分钟前'
  },
  {
    id: 3,
    type: 'warehouse',
    icon: 'House',
    title: '商品入库操作完成',
    time: '10分钟前'
  },
  {
    id: 4,
    type: 'finance',
    icon: 'Money',
    title: '发票开具完成 INV-2024-015',
    time: '15分钟前'
  },
  {
    id: 5,
    type: 'system',
    icon: 'Setting',
    title: '用户权限更新',
    time: '20分钟前'
  },
  {
    id: 6,
    type: 'warehouse',
    icon: 'House',
    title: '库存盘点完成',
    time: '30分钟前'
  },
  {
    id: 7,
    type: 'sales',
    icon: 'Sell',
    title: '新客户注册：客户H',
    time: '1小时前'
  },
  {
    id: 8,
    type: 'purchase',
    icon: 'ShoppingCart',
    title: '供应商评估完成',
    time: '2小时前'
  }
])

onMounted(() => {
  // 可以在这里加载真实数据
})
</script>

<style scoped lang="scss">
.dashboard {
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .stat-card {
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 8px;
    color: white;
    
    .stat-icon {
      font-size: 48px;
      margin-right: 20px;
      opacity: 0.8;
    }
    
    .stat-content {
      .stat-number {
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      
      .stat-label {
        font-size: 14px;
        opacity: 0.9;
      }
    }
  }
  
  .charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .chart-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    
    .chart-header {
      padding: 20px 20px 0;
      
      h3 {
        margin: 0;
        color: $text-color-primary;
        font-size: 16px;
      }
    }
    
    .chart-content {
      padding: 20px;
    }
  }
  
  .recent-activities {
    .card-header {
      margin-bottom: 20px;
      
      h3 {
        margin: 0;
        color: $text-color-primary;
        font-size: 16px;
      }
    }
    
    .activity-list {
      .activity-item {
        display: flex;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid $border-color-lighter;
        
        &:last-child {
          border-bottom: none;
        }
        
        .activity-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          color: white;
          
          &.purchase {
            background: $primary-color;
          }
          
          &.sales {
            background: $success-color;
          }
          
          &.warehouse {
            background: $warning-color;
          }
          
          &.finance {
            background: $danger-color;
          }
          
          &.system {
            background: $info-color;
          }
        }
        
        .activity-content {
          flex: 1;
          
          .activity-title {
            color: $text-color-primary;
            font-size: 14px;
            margin-bottom: 5px;
          }
          
          .activity-time {
            color: $text-color-secondary;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style> 